<template>
	<view class="page">
		<tabControl :current="current" :values="items" bgc="" activeColor="#ff743a" lineWidth="100"  :fixed="false" :scrollFlag='false' :isEqually='true' @clickItem="onClickItem" ></tabControl>
		<!-- 使用 swiper 配合 滑动切换 -->
		<swiper class="swiper" style="height: 100%;" @change='scollSwiper' :current='current'>
			<swiper-item v-for="(item,index) in items" :key='index'>
				<!-- 使用 scroll-view 来滚动内容区域 -->
				<scroll-view scroll-y="true" style="height: 100%;">
					<view v-for="(item,index1) in list" :key='index1'  class="box" v-if="item.source == 1&& level > 0 || item.source == 2|| item.source == 0">
						<view class="product-box">
							<image class="product-img" :src="item.image" mode="widthFix"></image>
							<view class="product-info">
								<view class="title">
									{{item.title}}
								</view>
								<view class="con">
									{{item.content}}
								</view>
								<view class="info">
									<view class="">
										{{item.price}}
									</view>
									<view class="buy"  @tap="toPorduct(item.id)">
										立即购买
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	let App = getApp();
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	export default {
	    components: { 
			tabControl 
		},
	    data() {
	        return {
	            items: [],
				type:[],
	            current: 0,
				list:[],
				level:0
	        };
	    },
		onShow() {
			this.getGoodsType();
		},
	    onLoad() {
			
		},
	    methods: {
			getGoodsType(){
				let userinfo = uni.getStorageSync('userinfo');

				this.$api.interfaceApi('getGoodsType')({
					id:userinfo.id,
					admin:App.globalData.sys
				}).then(res=>{
					if(res.code == 200){
						this.items = res.data.names
						this.type = res.data.type
						this.level = res.data.level
						this.getGoods(this.type[0]['id']);
					}
				})
			},
			getGoods(type){
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getGoods')({
					type:type,
					admin:App.globalData.sys
				}).then(res=>{
					if(res.code == 200){
						this.list = res.data
						
					}
					uni.hideLoading()
				})
			},
	        onClickItem(val) {
	            this.current = val.currentIndex
	        },
	        scollSwiper(e){
	            this.current = e.target.current
				this.getGoods(this.type[e.target.current]['id'])
	        },
			
			toPorduct(id){
				uni.navigateTo({
					url:`/pages/product/product-info?id=${id}`
				})
			}
	    }
	};
</script>

<style lang="less">
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	page{
	    height: 100%;
	}
	.page{
	    padding: 0rpx 50rpx 0rpx 50rpx;
	    height: 90%;
	}
	.box{
		width: 100%;
		height: 230rpx;
	}
	.product-box{
		display: flex;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		.product-img{
			width: 300rpx;
			height: 250rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
		
		.product-info{
			width: 100%;
			padding: 0rpx 20rpx;
			view:nth-child(1){
				font-size: 36rpx;
				
			}
			.title{
				margin-top: 20rpx;
			}
			.con{
				font-size: 28rpx;
				margin: 10rpx 0;
				color: #FF5528;
			}
			.info{
				display: flex;
				justify-content: space-between;
				
				view:nth-child(1){
					/* color: #efdcbe; */
					font-size: 30rpx;
					line-height: 57rpx;
				}
				.buy{
					width: 150rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50rpx;
					box-sizing: border-box;
					background-color: #00bc3c;
					color: #FFFFFF;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
